<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				user-select: none;
			}

			body {
				background: #aaa;
			}

			.content {
				width: 400px;
				padding: 10px;
				background: #888;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 50px;
			}

			.days-content:first-child {
				margin-top: 0px;
			}

			.days-content {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 20px;
			}

			.days-content-span {
				display: flex;
				justify-content: space-between;
			}

			.days-content-span span {
				color: #fff;
				font-size: 20px;
			}

			.days-content-content {
				width: 100%;
				height: 20px;
				background: #fff;
				box-shadow: 0px 0px 20px #666;
				margin-top: 5px;
				border-radius: 100px;
				overflow: hidden;
			}

			.days-content-content-z {
				width: 100%;
				background: #fff;
				box-shadow: 0px 0px 20px #666;
				margin-top: 5px;
				border-radius: 10px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			.days-content-content-z span {
				font-size: 20px;
				margin-left: 20px;
				margin-top: 5px;
				margin-bottom: 5px;
				margin-right: 20px;
				cursor: pointer;
			}

			.days-content-content-z span:hover {
				color: darkviolet;
			}

			#days-t {
				width: 0%;
				height: 100%;
				background: #aaff7f;
				border-radius: 100px;
			}

			#tfjy {
				display: none;
			}
			
			#elementspan{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="days-content">
				<div class="days-content-span">
					<div><span>days:</span><span id="days-s">0</span></div>
					<div><span>money:</span><span id="money-s">0</span></div>
				</div>
				<div class="days-content-content">
					<div id="days-t"></div>
				</div>
			</div>
			<div class="days-content" id="tfjy">
				<div class="days-content-span">
					<div><span>天赋机缘选择:</span></div>
				</div>
				<div class="days-content-content-z" id="jyxz">
					<span>神秘力量</span>
					<span>神秘力量</span>
					<span>神秘力量</span>
					<span>神秘力量</span>
				</div>
			</div>
			<div class="days-content">
				<div class="days-content-span">
					<div><span>悟道:</span><span id="days-wd">0</span></div>
				</div>
			</div>
			<div class="days-content">
				<div class="days-content-span" style="cursor: pointer;">
					<div><span>事件</span></div>
					<div><span id="elementspan">▶<!-- ▼ --></span></div>
				</div>
				<div class="days-content-content-z">
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
					<span>事件</span>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	var datas = {
		"days": 0,
		"money": 0,
		"wdnum": 0,
		"tf_1_bs": 1
	}
	var tf = {
		0: "获得500money",
		1: `悟道随着天数的变化增加,时间变化一次,悟道增加变化的天数之差*2`,
		2: "悟道增加5",
		3: "跳过10天",
		4: "财神到 | 获得翻倍金钱",
		5: "亿万富翁 | 获得100000000(1亿)",
		6: "时光机器 | 穿越到2000天后",
	}
	var dayst = 0;
	var daystspeed = 0.1;
	var dt = document.getElementById("days-t");
	var ds = document.getElementById("days-s");
	var ms = document.getElementById("money-s");
	var tfjy = document.getElementById("tfjy");
	var jyxz = document.getElementById("jyxz");
	var jyxzs = jyxz.querySelectorAll("span");
	var wd = document.getElementById("days-wd");
	window.onload = function() {
		console.log(getlocal());
		bd();
		setInterval(function() {
			setlocal();
			dayst += daystspeed;
			if (dayst >= 100) {
				showtf();
				tfjy.style.display = "block";
				dayst = 0;
				datas["days"]++;
			}
			bd();
		}, 1);
		// onclick = function() {
		// 	datas["money"]++;
		// }
		if (datas["tf_1_bs"] != 1) {
			tf_1();
		}
	}

	function tf_1() {
		var judgedays = datas["days"];
		var time;
		clearInterval(time);
		time = setInterval(function() {
			if (judgedays != datas["days"]) {
				datas["wdnum"] += Math.abs(datas["days"] - judgedays) * ((datas["tf_1_bs"] * 1));
				judgedays = datas["days"];
			}
		}, 1);
	}

	// 天赋点选择分支
	function tfswitchfun(n) {
		switch (n) {
			case 0:
				datas["money"] += 500;
				break;
			case 1:
				datas["tf_1_bs"] += 1;
				tf_1();
				break;
			case 2:
				datas["wdnum"] = datas["wdnum"] * 1 + 5;
				break;
			case 3:
				datas["days"] += 10;
				break;
			case 4:
				datas["money"] *= 2;
				break;
			case 5:
				datas["money"] += 100000000;
				break;
			case 6:
				datas["days"] += 2000;
				break;
		}
	}

	// 显示4个随机天赋
	function showtf() {
		for (var i = 0; i < jyxzs.length; i++) {
			var ran = parseInt(Math.random() * Object.keys(tf).length);
			jyxzs[i].index = ran
			jyxzs[i].innerHTML = tf[ran];
		}
	}

	// 绑定数据到网页
	function bd() {
		ds.innerHTML = datas["days"];
		ms.innerHTML = datas["money"];
		wd.innerHTML = datas["wdnum"];
		dt.style.width = dayst + "%";
		if (datas["tf_1_bs"] != 1) {
			tf[1] = `悟道随着天数的变化增加,时间变化一次,悟道增加变化的天数之差*${(datas["tf_1_bs"]+1)}`;
		}
		for (var i = 0; i < jyxzs.length; i++) {
			jyxzs[i].onclick = function() {
				tfjy.style.display = "none";
				tfswitchfun(this.index);
			}
		}
	}


	// 保存数据设置值
	function setlocal() {
		var jsondata = JSON.stringify(datas);
		localStorage.setItem("datas", jsondata);
	}

	// 获取保存的数据
	function getlocal() {
		var jsondata = JSON.parse(localStorage.getItem("datas"));
		if (jsondata) {
			datas["days"] = jsondata["days"];
			datas["money"] = jsondata["money"];
			datas["wdnum"] = jsondata["wdnum"];
			datas["tf_1_bs"] = jsondata["tf_1_bs"];
			return "获取成功";
		} else {
			return "获取失败";
		}
	}
</script>